<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
	<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
	
		<h:form id="MiscReimbursement">
		<p:growl/>
		<h:outputText value="Miscellaneous Expense Form" styleClass="outputTextTitle" />
		<h:panelGrid>
		 
		 <p:panel header="Employee Details"> 
             <h:panelGrid columns="8" cellspacing="8" columnClasses="gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">  
             	        
             	        <h:outputLabel value="*" style="color : red;"/>
             	        <h:outputLabel value="Expense Code" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{editMiscReimbursementBean.miscExpense.miscExpenseCode}" />


						<h:outputLabel value="" style="color : red;"/>
						<h:outputLabel value="#{msg['employeename.label']}" />
						<h:outputLabel value=":" />						
						<h:outputLabel value="#{editMiscReimbursementBean.miscExpense.employee.firstName} #{editMiscReimbursementBean.miscExpense.employee.lastName}"/>

						<h:outputLabel value="" style="color : red;"/>
						<h:outputLabel value="Employee Code" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{editMiscReimbursementBean.miscExpense.employee.employeeCode}"
							/>

						<h:outputLabel value="" style="color : red;"/>
						<h:outputLabel value="#{msg['place.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{editMiscReimbursementBean.miscExpense.employee.location}"  />

						<h:outputLabel value="" style="color : red;"/>
						<h:outputLabel value="#{msg['requestdate.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{editMiscReimbursementBean.miscExpense.requestDate}">
							<f:convertDateTime pattern="dd-MMM-yyyy HH:mm a" timeZone="#{editMiscReimbursementBean.timeZone}"/>
						</h:outputLabel>
						
						<h:outputLabel value="" style="color : red;"/>
						<h:outputLabel value="#{msg['dept.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{editMiscReimbursementBean.miscExpense.employee.moduleName}"  />
						
						<h:outputLabel value="" style="color : red;"/>
						<h:outputLabel value="#{msg['designation.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{editMiscReimbursementBean.miscExpense.employee.designation}"  />
             
             </h:panelGrid>
             
             <h:outputText value="Expense Details" styleClass="outputTextSubTitle" />
             <h:panelGrid columns="5" cellspacing="8" columnClasses="gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">  
             	        
           	    <h:outputLabel value="*" style="color : red;"/>
           	    <h:outputLabel value="#{msg['purpose.label']}" />
				<h:outputLabel value=":" />
				<p:inputText value="#{editMiscReimbursementBean.miscExpense.expensePurpose}"/>
				<h:outputLabel value="" />

				<h:outputLabel value="*" style="color : red;"/>
				<h:outputLabel value="#{msg['location.label']}" /> 
				<h:outputLabel value=":" />
				<p:inputText value="#{editMiscReimbursementBean.miscExpense.expenseLocation}" />
				<h:outputLabel value="" />
				
				<h:outputLabel value="" />
				<h:outputText value="Advance Taken" />
	              <h:outputText value=":"/>
	              <p:inputText  id="AdvanceTaken" value="#{editMiscReimbursementBean.miscExpense.advanceTakenAmount}"  maxlength="5" />
	              <p:selectOneMenu value="#{editMiscReimbursementBean.miscExpense.advanceTakenCurrency}" style="width: 160px;">
			      		<f:selectItem itemLabel="--Choose One--" itemValue="" />
			      		<f:selectItems value="#{editMiscReimbursementBean.currencyMap}"/> 
			      </p:selectOneMenu>

			
             </h:panelGrid>
             
             <h:outputText value="#{msg['miscellaneousexpensessubtitle.label']}" styleClass="outputTextSubTitle" />
             <h:panelGrid columns="4" cellspacing="8" columnClasses="gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailLabel">
             		
             		 <h:outputLabel value="*" style="color : red;"/>
             		 <h:outputText value="#{msg['date.label']}" />
		             <h:outputText value=":" />
		             <p:calendar  value="#{editMiscReimbursementBean.miscExpenseDetails.billDate}" pattern="dd-MMM-yyyy"/>
        
		             <h:outputLabel value="*" style="color : red;"/>
		             <h:outputText value="Bill Descriptio/Bill of" />
		             <h:outputText value=":" />
		             <p:inputText value="#{editMiscReimbursementBean.miscExpenseDetails.billDesc}" />
                
		             <h:outputLabel value="" />
		             <h:outputText value="Bill no" />
		             <h:outputText value=":" />
		             <p:inputText  value="#{editMiscReimbursementBean.miscExpenseDetails.billNo}" />
		             
		             <h:outputLabel value="" />
		             <h:outputText value="Amount" />
		             <h:outputText value=":" />
		             <p:inputText id="ExpenseAmount" value="#{editMiscReimbursementBean.miscExpenseDetails.amount}" maxlength="5"/>
	      
		             <h:outputLabel value="" />
		             <h:outputText value="Currency" /> 
		             <h:outputText value=":" />
		             <p:selectOneMenu value="#{editMiscReimbursementBean.miscExpenseDetails.currency}" style="width: 160px;">
		              	<f:selectItems value="#{editMiscReimbursementBean.currencyMap}"/>
		             </p:selectOneMenu>
		             
		             <h:outputLabel value="" />
		             <h:outputText value="Bill Attached" />
		             <h:outputText value=":" />
		             <p:selectOneMenu value="#{editMiscReimbursementBean.miscExpenseDetails.billAttached}" style="width: 160px;">
			              <f:selectItem itemLabel="Yes" itemValue="Yes"/>
			              <f:selectItem itemLabel="No" itemValue="No"/>
		             </p:selectOneMenu> 
		              
		              <h:inputHidden/><h:inputHidden/><h:inputHidden/>	          
		              <h:panelGroup>
		                <p:commandButton value="Add" actionListener="#{editMiscReimbursementBean.addMiscExpenseDetailsAction}" update="@form"/>
		                <p:commandButton value="Reset" actionListener="#{editMiscReimbursementBean.resetMiscExpenseDetailsAction}" ajax="false"/>
		              </h:panelGroup>
             </h:panelGrid> 
             
              
           <p:dataTable id="miscExpensesDetails" value="#{editMiscReimbursementBean.miscExpensesDetailsList}" var="miscExpenseDetails" binding="#{editMiscReimbursementBean.assignedMiscExpenseDetailsList}" >  
  
            <p:column headerText="#{msg['date.label']}">
                <h:outputText value="#{miscExpenseDetails.billDate}">
                  <f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{editMiscReimbursementBean.timeZone}"/>
                </h:outputText>  
            </p:column>  
  
            <p:column headerText="#{msg['billmode.label']}"> 
                <h:outputText value="#{miscExpenseDetails.billDesc}" />  
            </p:column> 
            
            <p:column headerText="#{msg['billno.label']}">  
                <h:outputText value="#{miscExpenseDetails.billNo}" />  
            </p:column>  
            
            <p:column headerText="Amount"> 
                <h:outputText value="#{miscExpenseDetails.amount}"  />  
            </p:column> 
             
            <p:column headerText="Currency">  
                <h:outputText value="#{miscExpenseDetails.currency}" />  
            </p:column> 
             
            <p:column headerText="#{msg['billattached.label']}"> 
                <h:outputText value="#{miscExpenseDetails.billAttached}" />  
            </p:column> 
              
            <p:column headerText="Remove" style="text-align: center; width: 30px;">		
				<p:commandButton icon="ui-icon-close" title="Remove from list"
							actionListener="#{editMiscReimbursementBean.removeMiscExpensesDetails}"
							update="@form" style="padding: 0"/>	
		    </p:column>
            
           
  
        </p:dataTable>  
        
        <br/><br/>
	        <h:outputText value="Expenses report summary total" styleClass="outputTextSubTitle" />
	        <p:dataTable  value="#{editMiscReimbursementBean.currencies}" var="currency" > 
	             
			            <p:column headerText="Amount"> 		                
			                    <h:outputText value="#{currency.amount}" />		               	               
			            </p:column>  
			             <p:column headerText="Currency"> 		                
			                    <h:outputText value="#{currency.currency}" />		               	               
			            </p:column> 		  
	          </p:dataTable>  
	          
	         
		  </p:panel>
		  
		  <h:panelGroup style="float:right;">
 			<p:commandButton actionListener="#{editMiscReimbursementBean.confirmationAction}" update="@form" 
 			value="Submit" />
 			<p:commandButton value="Back" onclick="history.back();"  />
 		   </h:panelGroup>
		</h:panelGrid>
		<p:confirmDialog widgetVar="confirmation" id="confirmation" severity="alert" message="This will submit your misc. expense request. Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Submit Now"  actionListener="#{editMiscReimbursementBean.submitMiscExpense}" update="@form" oncomplete="confirmation.hide()"/>
					<p:commandButton id="decline" value="Not Yet" onclick="confirmation.hide()" type="button" />
				</h:panelGroup>
		</p:confirmDialog>
		 
		</h:form>
		
	</ui:define>
</ui:composition>

